<template>
  <div class="history-hot">
    <div class="history">
      <p>历史记录<span class="delete-btn" @click="deleteHistoty"></span></p>
      <div class="tag-holder">
        <div
          @click="searchByTag(item.keyword)"
          class="tag"
          v-for="(item, index) in $store.state.search.historyData"
          :key="index"
        >
          {{ item.keyword }}
        </div>
      </div>
    </div>
    <div class="hot">
      <p>热门搜索</p>
      <div class="tag-holder">
        <div
          @click="searchByTag(item.keyword)"
          :class="{ active: item.is_hot === 1 }"
          class="tag"
          v-for="(item, index) in $store.state.search.hotKeywordList"
          :key="index"
        >
          {{ item.keyword }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { searchClear } from "@/api/search/search.js";
export default {
  methods: {
    searchByTag(keyword) {
      this.$store.commit("search/getInput", keyword);
      this.$store.commit("search/changeShow", "goods");
      this.$store.dispatch("search/asyncGethelperList");
    },
    deleteHistoty() {
      let openId = localStorage.getItem("openId");
      let _this = this;
      searchClear({ openId }).then((res) => {
        _this.$store.dispatch("search/asyncGetHistoryAndHot");
      });
    },
  },
  created() {
    this.$store.dispatch("search/asyncGetHistoryAndHot");
  },
};
</script>

<style lang="scss">
.history-hot {
  .history {
    padding: 15px;
    background-color: #fff;
    .delete-btn {
      float: right;
      display: inline-block;
      width: 27px;
      height: 27px;
      background: url("http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/del1-93f0a4add4.png")
        no-repeat center;
    }
  }
  .hot {
    padding: 15px;
    margin-top: 10px;
    background-color: #fff;
  }

  .tag-holder {
    margin-top: 20px;
    overflow: hidden;
    .tag {
      float: left;
      margin: 10px 0;
      margin-left: 10px;
      padding: 5px;
      width: fit-content;
      color: #333;
      border: 1px solid #999;
    }
    .tag.active {
      border: 1px solid #b4282d;
      color: #b4282d;
    }
  }
}
</style>